.dropdown-link {
  @apply relative;
  &.open {
    height: auto;
  }
  &.open .dropdown-link__container {
    @apply block !important;
  }
  /* &:hover .dropdown-link__container {
    @apply md:block !important;
  } */
  .title {
    @apply inline-flex items-center;
    .xicon-container {
      @apply mr-0.5;
    }
  }
  .arrow {
    @apply ml-2;
  }
  .dropdown-link__title {
    @apply text-sm font-semibold items-center text-reco-text-lightmode hidden;
    @apply md:flex;
    @apply dark:text-reco-text-darkmode;
  }

  .dropdown-link__title--active {
    @apply text-reco-primary !important;
  }

  .dropdown-link--mobile__title {
    @apply flex items-center justify-between w-full text-sm font-semibold text-reco-text-lightmode;
    @apply md:hidden;
    @apply dark:text-reco-text-darkmode;
  }
  .dropdown-link__container {
    @apply pl-3 py-1 my-0 rounded-lg bg-basic list-none;
    @apply md:px-3 md:hidden md:absolute md:top-8 md:right-0 md:py-2 md:my-3 md:border-block;
    .dropdown-link__item {
      @apply relative;
      &:not(:first-of-type)::before {
        @apply absolute -left-3 -right-3 top-0 block border-t-0 border-solid border-reco-border-lightmode;
        /* 待确定 */
        /* @apply md:border-t; */
        @apply dark:border-reco-border-darkmode;
        content: '';
      }
      &:not(:first-of-type) {
        .dropdown-link__subtitle {
          @apply relative z-30 mt-8;
          &::before {
            @apply absolute left-0 -top-4 block w-full border-t border-solid border-reco-border-lightmode;
            @apply dark:border-reco-border-darkmode;
            content: '';
          }
        }
      }
      .dropdown-link__subtitle {
        @apply my-1 py-0 text-xs;
        @apply md:text-sm;
      }
      .dropdown-link__subcontainer {
        @apply list-none pl-0;
        .dropdown-link__subitem .link {
          @apply relative transition-all duration-500 text-lighter;
          &::before {
            @apply absolute inset-y-0 left-0 top-0 bottom-0 m-auto block w-0 h-0 rounded-1/2 transition-all duration-500;
            @apply bg-reco-primary;
            content: '';
          }
          &:hover {
            @apply text-reco-primary;
          }
          &.active {
            @apply pl-2;
            a {
              @apply text-reco-primary;
            }
            &::before {
              @apply w-1 h-1;
            }
          }
          &.router-link-active {
            @apply pl-2;
            &::before {
              @apply w-1 h-1;
            }
          }
        }
      }
      .link {
        @apply inline-block w-full text-sm;
      }
    }
  }
}
